<template>
  <div>
        <h1>{{user_name}}的开课信息</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="课程名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="开课院系" prop="dept">
    <el-select v-model="ruleForm.dept" placeholder="请选择开课院系">
      <el-option label="计算机学院" value="计算机学院"></el-option>
       <el-option label="软件学院" value="软件学院"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="开课时段" required>
    <el-col :span="9">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="9">
      <el-form-item prop="date2">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
<!--    <el-col class="line" :span="2">-</el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item prop="date2">-->
<!--        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
  </el-form-item>
<!--  <el-form-item label="即时配送" prop="delivery">-->
<!--    <el-switch v-model="ruleForm.delivery"></el-switch>-->
<!--  </el-form-item>-->
  <el-form-item label="面向年级" prop="grade">
    <el-checkbox-group v-model="ruleForm.grade">
      <el-checkbox label="大一" name="grade"></el-checkbox>
      <el-checkbox label="大二" name="grade"></el-checkbox>
      <el-checkbox label="大三" name="grade"></el-checkbox>
      <el-checkbox label="研一" name="grade"></el-checkbox>
      <el-checkbox label="研二" name="grade"></el-checkbox>
      <el-checkbox label="研三" name="grade"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="课程类别" prop="courseType">
    <el-radio-group v-model="ruleForm.courseType">
      <el-radio label="核心专业课"></el-radio>
      <el-radio label="一般专业课"></el-radio>
      <el-radio label="通识课"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="备注" prop="note">
    <el-input type="textarea" v-model="ruleForm.note"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
import api from '../../tool/user'
export default {
  name: "teacherProfile",//开课页面
  props: ['user_name', 'teacherid'],
  inject:['getCourses'],
  data() {
      return {
        ruleForm: {
          name: '',
          dept: '',
          date1: '',
          date2: '',
          // delivery: false,
          grade: [],
          courseType: '',
          note: ''
        },
        teacher_id: this.teacherid,
        rules: {
          name: [
            { required: true, message: '请输入课程名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          dept: [
            { required: true, message: '请选择开课学院', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          grade: [
            { type: 'array', required: true, message: '请至少选择一个面向年级', trigger: 'change' }
          ],
          courseType: [
            { required: true, message: '请选择课程类别', trigger: 'change' }
          ]
        }
      };
    },
  beforeRouteEnter: (to, from, next) => {
      console.log("准备进入开课信息页");
      next();
      // next(vm=> {
      //   vm.getData();
      // });
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开开课信息页");
    next();
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let response = await api.addCourse(this.$data)//加课;
            if (response.code === '40000') {
              alert('该课程已存在!');
            } else {//添加成功，刷新页面
              //跳转到TM
              this.getCourses();
              this.$router.push({name: 'teacherMain', params: {user_name: this.user_name, teacherid: this.teacherid}});//id
              alert('submit!');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
</script>

<style scoped>

</style>
